<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购买车辆</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
        background: #6577d3;
        min-height: 100vh;
        padding: 20px;
      }

      .container {
        max-width: 400px;
        margin: 0 auto;
        background: white;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }

      .header {
        background: linear-gradient(45deg, #ff6b6b, #ee5a24);
        color: white;
        padding: 30px 20px;
        text-align: center;
      }

      .header h1 {
        font-size: 24px;
        margin-bottom: 10px;
      }

      .car-info {
        padding: 30px 20px;
      }

      .car-card {
        border: 2px solid #f1f2f6;
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
      }

      .car-card:hover {
        border-color: #667eea;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(102, 126, 234, 0.1);
      }

      .car-name {
        font-size: 18px;
        font-weight: bold;
        color: #2f3542;
        margin-bottom: 10px;
      }

      .car-details {
        color: #57606f;
        margin-bottom: 15px;
        line-height: 1.6;
      }

      .car-price {
        font-size: 24px;
        font-weight: bold;
        color: #ee5a24;
        text-align: center;
        margin-bottom: 20px;
      }

      .order-section {
        background: #f8f9fa;
        padding: 20px;
        margin: 20px 0;
        border-radius: 10px;
      }

      .order-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
      }

      .order-label {
        font-weight: bold;
        color: #2f3542;
      }

      .order-value {
        color: #667eea;
        font-family: monospace;
      }

      .btn {
        width: 100%;
        padding: 15px;
        border: none;
        border-radius: 10px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 10px;
      }

      .btn-generate {
        background: linear-gradient(45deg, #667eea, #764ba2);
        color: white;
      }

      .btn-generate:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
      }

      .btn-pay {
        background: linear-gradient(45deg, #ff6b6b, #ee5a24);
        color: white;
      }

      .btn-pay:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3);
      }

      .btn:disabled {
        background: #ddd;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      .footer {
        text-align: center;
        padding: 20px;
        color: #57606f;
        font-size: 14px;
      }

      .status-success {
        color: #27ae60;
      }

      .status-failed {
        color: #e74c3c;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>🚗 二手车商城</h1>
        <p>优质二手车，值得信赖</p>
      </div>

      <div class="car-info">
        <div class="car-card">
          <div class="car-name">吉利 Alto</div>
          <div class="car-details">
            📅 年份：2020年<br />
            🛣️ 里程：3.2万公里<br />
            ⚙️ 变速箱：自动挡<br />
            🏷️ 车况：精品车况
          </div>
          <div class="car-price">¥ 268,000</div>
        </div>

        <div class="order-section">
          <div class="order-info">
            <span class="order-label">订单号：</span>
            <span class="order-value" id="orderNumber">点击生成订单号</span>
          </div>
          <div class="order-info">
            <span class="order-label">生成时间：</span>
            <span class="order-value" id="orderTime">-</span>
          </div>
        </div>

        <button class="btn btn-generate" onclick="generateOrder()">
          🎲 生成订单号
        </button>
        <button
          class="btn btn-pay"
          id="payBtn"
          onclick="proceedToPay()"
          disabled
        >
          💳 立即支付
        </button>
        <button
          class="btn btn-pay"
          id="payObjectBtn"
          onclick="proceedToPayWithObject()"
          disabled
        >
          💳 对象支付
        </button>

        <div
          id="paymentResult"
          style="
            display: none;
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
          "
        ></div>
        <div
          id="paymentStatus"
          style="margin-top: 10px; text-align: center; font-weight: bold"
        ></div>
      </div>

      <div class="footer">
        <p>安全支付 · 品质保证 · 售后无忧</p>
      </div>
    </div>

    <script>
      let currentOrderId = null;
      let orderData = {};

      function generateOrder() {
        // 生成订单号：时间戳 + 随机数
        const timestamp = Date.now();
        const random = Math.floor(Math.random() * 10000)
          .toString()
          .padStart(4, "0");
        currentOrderId = `ORDER${timestamp}${random}`;

        // 构建订单对象
        orderData = {
          orderId: currentOrderId,
          amount: "268000.00",
          productName: "奔驰 C200L 2020款",
          productId: "CAR_001",
          timestamp: timestamp,
          currency: "CNY",
          buyerInfo: {
            name: "张三",
            phone: "13800138000",
          },
        };

        // 更新页面显示
        document.getElementById("orderNumber").textContent = currentOrderId;
        document.getElementById("orderTime").textContent =
          new Date().toLocaleString("zh-CN");

        // 启用支付按钮
        const payBtn = document.getElementById("payBtn");
        payBtn.disabled = false;
        payBtn.textContent = "💳 立即支付 - " + currentOrderId.substr(-8);

        // 添加动画效果
        const orderSection = document.querySelector(".order-section");
        orderSection.style.animation = "pulse 0.5s ease-in-out";
        setTimeout(() => {
          orderSection.style.animation = "";
        }, 500);

        console.log("生成订单号:", currentOrderId);
        console.log("订单数据:", orderData);
      }

      function proceedToPay() {
        if (!currentOrderId) {
          alert("请先生成订单号！");
          return;
        }

        console.log("准备调用原生支付（字符串方式），订单号:", currentOrderId);

        let orderInfo =
          "{\n" +
          '        "payId": "1952278249449267200",\n' +
          '        "payRequest": "66b961785b8c46e24773ec7a326fd010d385114b91013e6dc3956955c1a08adc",\n' +
          '        "merOrderId": "202508041559409825",\n' +
          '        "createTime": "2025-08-04 15:59:40",\n' +
          '        "baseUrl": "https://pay-core-openapi-test.geelycv-test.com/",\n' +
          '        "wxKey": "wxbb655463c325a087"\n' +
          "    }";

        // 调用Android原生方法（字符串方式）
        if (window.geelycvApp && window.geelycvApp.goPay) {
          window.geelycvApp.goPay(orderInfo);
        } else {
          console.error("geelycvApp.goPay 方法不可用");
        }
      }

      function proceedToPayWithObject() {
        if (!currentOrderId || !orderData.orderId) {
          alert("请先生成订单号！");
          return;
        }

        console.log("准备调用原生支付（对象方式），订单数据:", orderData);

        // 调用Android原生方法（对象方式）
        if (window.geelycvApp && window.geelycvApp.goPayWithObject) {
          window.geelycvApp.goPayWithObject(JSON.stringify(orderData));
        } else {
          console.error("geelycvApp.goPayWithObject 方法不可用");
          alert("对象支付接口不可用，请检查应用配置");
        }
      }

      // 接收原生支付结果的回调函数
      window.onPaymentResult = function (result) {
        console.log("收到原生支付结果:", result);
        showPaymentResult(result);
      };

      // 更新支付状态的回调函数
      window.updatePaymentStatus = function (success, orderId) {
        console.log("更新支付状态:", success, orderId);
        const statusElement = document.getElementById("paymentStatus");
        if (statusElement) {
          statusElement.textContent = success ? "支付成功" : "支付失败";
          statusElement.className = success
            ? "status-success"
            : "status-failed";
        }
      };

      // 显示支付结果的回调函数
      window.showPaymentResult = function (result) {
        const resultDiv = document.getElementById("paymentResult");
        if (resultDiv) {
          resultDiv.innerHTML = `
                    <h3>支付结果</h3>
                    <p><strong>订单号:</strong> ${result.orderId}</p>
                    <p><strong>状态:</strong> <span class="${
                      result.success ? "status-success" : "status-failed"
                    }">${result.message}</span></p>
                    <p><strong>时间:</strong> ${new Date(
                      result.timestamp
                    ).toLocaleString("zh-CN")}</p>
                    ${
                      result.originalOrder
                        ? `<p><strong>原始订单:</strong> ${JSON.stringify(
                            result.originalOrder,
                            null,
                            2
                          )}</p>`
                        : ""
                    }
                `;
          resultDiv.style.display = "block";
        }
      };

      // 监听自定义支付结果事件
      window.addEventListener("paymentResult", function (event) {
        console.log("收到支付结果事件:", event.detail);
        showPaymentResult(event.detail);
      });

      // 监听原生触发的payStatus事件
      window.addEventListener("payStatus", function (event) {
        console.log("收到payStatus事件:", event.detail);
        alert("支付状态更新: " + event.detail);

        // 可以在这里添加更多的状态处理逻辑
        const statusDiv = document.getElementById("payment-status");
        if (statusDiv) {
          statusDiv.innerHTML =
            '<p style="color: #007bff; font-weight: bold;">状态更新: ' +
            event.detail +
            "</p>";
        }
      });

      // 添加CSS动画
      const style = document.createElement("style");
      style.textContent = `
            @keyframes pulse {
                0% { transform: scale(1); }
                50% { transform: scale(1.05); }
                100% { transform: scale(1); }
            }
        `;
      document.head.appendChild(style);
    </script>
  </body>
</html>
